<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE HTML>
<html>
<head>
<base href="${ctx }/">
<title>已完成订单列表</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet"
	href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
<link rel="stylesheet"
	href="plugin/bootstrap-table/dist/bootstrap-table.css">
<!-- <link rel="stylesheet" href="css/zoom.css" media="all" />  -->
<link rel="stylesheet" href="alert/alert.css">
<style type="text/css">
a {
	color: #73879C;
}
#que>tr>td{
    width: 20%;
}

.form-group {
    margin-left: 10px;
    margin-top: 10px;
}
#oul>li{
list-style-type: none;
margin: 10px;
}
#tctable>tbody>tr>td{
    border: 1px solid #908787;
    padding: 18px;
}
</style>
</head>
<body>

	<div>
		<ul class="breadcrumb">
			<li><i class="icon-home home-icon"></i> <a
				href="javascript:void(0)">Order Management(订单管理)</a></li>
			<li class="active"><a href="view/order/complete_list.jsp">Completed Order List(已完成订单列表)</a>
			</li>
		</ul>
	</div>
	<div class="form-inline" role="form" method="post" id="queryForm">

		<table style="margin-left: 120px;" id="que">
			<tr>
				<td>
					<div class="form-group">
						<label>Order Number(订单号):</label> <input type="text" id="orderNo" placeholder=""
							class="form-control">
					</div>
				</td>
				<td>
					<div class="form-group">
						<label>Creation time(生成时间):</label> <input type="text"
							class="form-control input-append form_date" id="createTime">
					</div>
				</td>

				<td>
					<div class="form-group">
						<label>Order Status(订单状态):</label> <select id='status' class="form-control">
							<option value="">Total(全部)</option>
							<option value="8">Completed (waiting for review)(已完成(未评价))</option>
							<option value="9">Completed (reviewed)(已完成(已评价))</option>
							<option value="10">Canceled (Free of charge)(已取消(不收费))</option>
							<option value="12">Canceled (paid)(已取消(已支付))</option>
							<option value="13">Paid(已结算)</option>
						</select>
					</div>
				</td>
				<td>
					<div class="form-group">
						<label>Service category(服务类型):</label> <select id='carType' class="form-control">
							<option value="">Total</option>
							<option value="1">fab ONE</option>
							<option value="2">fab</option>
							<option value="3">fab PRO</option>
						</select>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="form-group">
						<label>REGO(车牌号):</label> <input type="text" id="licensePlate"
							placeholder="" class="form-control">
					</div>
				</td>
				<td>
					<div class="form-group">
						<label>Rider Phone(乘客电话):</label> <input type="text" id="telephone"
							placeholder="" class="form-control">
					</div>
				</td>

				<td>
					<div class="form-group">
						<label>Driver Name(司机名称):</label> <input type="text" id="driverName"
							placeholder="" class="form-control">
					</div>
				</td>
				<td>
					<div class="form-group">
						<label>Driver Phone(司机电话):</label> <input type="text" id="driverPhone"
							placeholder="" class="form-control">
					</div>
				</td>
              <td>
					<div class="form-group">
						<label>Refund Amount(退款金额):</label> 
						<select id='refundsPrice' class="form-control">
							<option value="">Total</option>
							<option value="1">0</option>
							<option value="2">&gt;0</option>
						</select>
					</div>
				</td>
			</tr>
			<tr>
			  <td colspan="4" style="text-align:center"><div class="form-group">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button id="queryBtn" onclick="doQuery1('demo-table',queryParams1())"
				class="btn btn-primary">Search</button>
			<button id="queryBtn" onclick="exportTable()" class="btn btn-primary">Export
			</button>
		</div></td>
			</tr>
		</table>

		
	</div>
	<br>
	<p id="onLineNum" style='text-align: center; color: red;'></p>
	<table id="demo-table"></table>
</body>

<!-- 加载需要的js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/jquery-bootstrap-pagination.js"></script>
<script src="plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script
	src="plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src='alert/alert.js'></script>
<!--时间  -->
<script src="js/bootstrap-datetimepicker.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/common.js"></script>
<script src="plugin/layer/layer.js"></script>
<script type="text/javascript" charset="utf-8">
    var M = {}

    $('.form_date').datetimepicker({
        minView: "month", //选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        format: 'dd/mm/yyyy',
        todayBtn: 1,
        autoclose: 1,
    });

    $(function () {
        initPath("${ctx }");
        initTable('demo-table', queryParams, columns, "orderItems/getUnfinishedList");
        
    });
   
 //导出
function exportTable(){
	var telephone = $('#telephone').val();
    var createTime= $('#createTime').val();
   var  status=$('#status').val();
   var orderNo= $('#orderNo').val();
	var carType=$('#carType').val();
	var licensePlate= $('#licensePlate').val();
	var driverName=$('#driverName').val();
	var driverPhone=$('#driverPhone').val();
	var refundsPrice=$('#refundsPrice').val();
	window.location.href="orderItems/getCompleteExport?queryType=1&telephone="+telephone+"&createTime="+createTime+"&status="+status
			+"&orderNo="+orderNo+"&licensePlate="+licensePlate+"&driverName="+driverName+"&driverPhone="+driverPhone+"&refundsPrice="+refundsPrice;
}

function see(id){
	var row=JSON.parse(sessionStorage.getItem("corder"+id));
	var times=timeStamp2String(row.createTime);
	var startTime=timeStamp2String(row.serviceStartTime);
	var vehicleRand=row.vehicleRand==null?"":row.vehicleRand;
	var driverName=row.driverName==null?"":row.driverName;
	var driverPhone=row.driverPhone==null?"":row.driverPhone;
	var carNum=row.carNum==null?"":row.carNum;
	var wayToPlace=row.wayToPlace==null?"":row.wayToPlace;
	var star=row.star==null?"0":row.star;
	var content=row.content==null?"":row.content;
	var exceptionalATip=row.exceptionalATip==null?"":row.exceptionalATip;
	var serveiceCharge =row.serveiceCharge==null?"":row.serveiceCharge;
	var bookingFee=row.bookingFee==null?"":row.bookingFee;
	var time=row.time==null?"":row.time;
	var startFee=row.startFee==null?"":row.startFee;
	var totalPrice=row.totalPrice==null?"":row.totalPrice;
	var couponMoney=row.couponMoney==null?"":row.couponMoney;
	var carType="fab PRO";
	if(row.carType==1){
		carType="fab ONE";
	}else if(row.carType==2){
		carType="fab";
	}
	var star1 = parseInt(star);
	var img="";
	for(var i in star1){
		 img+="<img srtle='width:30px;height;30px;margin-left:5px' src='images/starOne.png'/>";
	}
	var str="<form class=\"form-horizontal\">"
		+"<ul style=\"margin-left: 20px;\" id='oul'> <li><p><img src='images/yd.jpeg' style='width:8px;height:8px'/><span style='font-weight: bold;margin-left: 5px;'>order information(订单消息)</span><p></li><li><span style=\"margin-left: 20px; \">"
		+"Order number(订单号)：</span><span>"+row.orderNo+"</span><span style=\"margin-left: 20px; \">Creation time(创建时间)：</span><span>"+times+"</span><span style=\"margin-left: 20px; \">Service began(服务开始键)：</span><span>"+startTime+"</span></li>"
		+"<li><table style=\"margin-left:5px\" id=\"tctable\">"
	    +"<tbody><tr><td>Place of departure(出发地)</td><td>Through site(途经地点)</td><td>Destination(目的地点)</td><td>Service category(服务类型)</td><td>Base Fare</td><td>Mileage fee(里程费)</td><td>时长</td><td>Toll(总额)</td><td>Booking Fee(预定费)</td><td>Minimum Fare(最低消费)</td><td>Voucher(优惠劵)</td><td>Payment less Voucher(实付总额)</td></tr>"
	    +"<tr><td>"+row.departureLocation+"</td><td>"+wayToPlace+"</td><td>"+row.arrivedLocation+"</td><td>"+carType+"</td><td>"+startFee+"</td><td>"+row.mileageMoney+"</td><td>"+time+"</td><td>"+serveiceCharge+"</td><td>"+bookingFee+"</td><td>"+row.minimumFare+"</td><td>"+couponMoney+"</td><td>"+totalPrice+"</td></tr></tbody></table></li>"
	    +"<li><p><img src='images/yd.jpeg' style='width:8px;height:8px'/><span style='font-weight: bold;margin-left: 5px;'>Subscriber information(订车人信息)</span><p></li>"
	    +"<li><img src='"+row.userPicture+"' style='width:20px;height:20px'/><span style=\"margin-left: 20px; \">Rider  Name(乘客姓名)：</span><span>"+row.name+"</span><span style=\"margin-left: 20px; \">Rider Phone(乘客电话)：</span><span>"+row.telephone+"</span></li>"
	    +"<li><p><img src='images/yd.jpeg' style='width:8px;height:8px'/><span style='font-weight: bold;margin-left: 5px;'> Driver information(司机信息)</span><p></li>"
	    +"<li><img src='"+row.driverPicture+"' style='width:20px;height:20px'/><span style=\"margin-left: 20px; \">Driver Name(司机名称)：</span><span>"+driverName+"</span><span style=\"margin-left: 20px; \">Driver Phone(司机电话)：</span><span>"+driverPhone+"</span></li>"
	    
	    +"<li><p><img src='images/yd.jpeg' style='width:8px;height:8px'/><span style='font-weight: bold;margin-left: 5px;'>Vehicle information(车辆信息)</span><p></li>"
	    +"<li><img src='"+row.carPicture+"' style='width:20px;height:20px'/><span style=\"margin-left: 20px; \">REGO(车牌号)：</span><span>"+carNum+"</span><span style=\"margin-left: 20px; \">Make(品牌)：</span><span>"+vehicleRand+"</span></li>"
	    
	    +"<li><p><img src='images/yd.jpeg' style='width:8px;height:8px'/><span style='font-weight: bold;margin-left: 5px;'>Service evaluation(服务评价)</span><p></li>"
	    +"<li><span style=\"margin-left: 20px; \">Evaluation of star(评价星级)</span><span style=\"margin-left: 20px; \">"+img+"</span></li>"
	    +"<li><span style=\"margin-left: 20px; \">Evaluation content(评价内容)</span><span style=\"margin-left: 20px; \">"+content+"</span></li>"
	    
	    +"<li><p><img src='images/yd.jpeg' style='width:8px;height:8px'/><span style='font-weight: bold;margin-left: 5px;'>Tip information(打赏信息)</span><p></li>"
	    +"<li><span style=\"margin-left: 20px; \">Tip Amount(打赏金额)</span><span style=\"margin-left: 20px; \">"+exceptionalATip+"</span> AUD</li>"
	    
	    +"</ul>"
		+"</form >";
		layer.open({
			  type: 1,
			  title: "Completed Order Detail",
			  skin: 'layui-layer-rim', //加上边框
			  area: ['920px', '640px'], //宽高
			  content: str
			});
}

    var columns = [{field: '', title: 'Choose', checkbox: true},
        {
            field: 'id',
            title: 'Operataion(操作)',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
            	sessionStorage.setItem("corder"+value, JSON.stringify(row)); 
            	var str ="";
                if(row.refundsPrice>0){
                	str = '<a  style="margin-left:5px;color:#03A9F4" href="javascript:void(0);" onclick="see('+value+')">Detail</a>';
                }else{
                	str = '<a  style="margin-left:5px;color:#03A9F4" href="javascript:void(0);" onclick="see('+value+')">Detail</a>';
                }
                return str;
            }
        },
        {
            field: 'orderNo',
            title: 'Order Number(订单号)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'createTime',
            title: 'Creation time(创建时间)',
            align: 'center',
            valign: 'middle',
            formatter: timeStamp2String,
        },
        {
            field: 'status',
            title: 'Order Status(订单状态)',
            align: 'center',
            valign: 'middle',
            formatter:function(value, row, index){
            	var str="";
            	if(value==8){
            		 str="Completed (waiting for review)";
            	}else if(value==9){
            		 str="Completed (reviewed) ";
            	}else if(value==10){
            		 str="Canceled (Free of charge) ";
            	}else if(value==12){
            		 str="Canceled (paid)";
            	}else if(value==13){
            		 str="Paid";
            	}
            	return str;
            }
        },
        {
            field: 'departureLocation',
            title: 'Pick up address(上车地址)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'wayToPlace',
            title: 'Extra stop(途经点)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'arrivedLocation',
            title: 'Destination address(目的地点)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'carType',
            title: 'Service category(服务类型)',
            align: 'center',
            valign: 'middle',
            formatter:function(value, row, index){
            	var str="";
            	if(value==1){
            		str="fab ONE";
            	}else if(value==2){
            		str="fab";
            	}else{
            		str="fab PRO";
            	}
            	return str;
            }
        },
        {
            field: 'telephone',
            title: 'Rider Phone(乘客电话)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'name',
            title: 'Rider Name(乘客名称)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'carNum',
            title: 'REGO(车牌号)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'vehicleRand',
            title: 'Make(品牌)',
            align: 'center',
            valign: 'middle',
            formatter: function(value, row, index){
            	value=value==null?"":value;
            	return value;
            }
        },
        {
            field: 'driverName',
            title: 'Driver Name(司机名称)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'driverPhone',
            title: 'Driver Phone(司机电话)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'totalPrice',
            title: 'Payment less Voucher',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'refundsPrice',
            title: 'Refund Amount(退款金额)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'star',
            title: 'Stars(星级)',
            align: 'center',
            valign: 'middle',
            formatter: function(value, row, index){
            	var str="";
            	for(var i=0;i<parseInt(value);i++){
            		str+="<img src='images/starOne.png' style=\"width:30px;height:30pxmargin-left:5px\">";
            	}
            	return str;
            }
        },
        {
            field: 'exceptionalATip',
            title: 'Tips Amount(小费金额)',
            align: 'center',
            valign: 'middle'
        }
    ];

    function queryParams(params) {
        var param = {
       		orderNo: $('#orderNo').val(),
       		createTime: $('#createTime').val(),
       		status: $('#status').val(),
       		carType: $('#carType').val(),
       		licensePlate: $('#licensePlate').val(),
       		telephone:$('#telephone').val(),
       		driverName:$('#driverName').val(),
       		driverPhone:$('#driverPhone').val(),
       		refundsPrice:$('#refundsPrice').val(),
       		queryType:2,
            pageNo: this.pageNumber,
            pageSize: this.pageSize
        }
        return param;
    }

    function queryParams1() {
        var param = {
       		orderNo: $('#orderNo').val(),
        	createTime: $('#createTime').val(),
        	status: $('#status').val(),
        	carType: $('#carType').val(),
        	licensePlate: $('#licensePlate').val(),
        	telephone:$('#telephone').val(),
        	driverName:$('#driverName').val(),
        	driverPhone:$('#driverPhone').val(),
        	refundsPrice:$('#refundsPrice').val(),
        	queryType:2,
            pageNo: 1,
            pageSize: this.pageSize
        }
        return param;
    }

  
</script>
</html>


